<template>
	<view class="page-view">
		<view class="header-bg-wrap"></view>
		<MyNav :title="house.townName || '-'" @navBarHeight="setNavBarHeight"></MyNav>
		<view class="top_bj">
			<view class="house_card">
				<view class="flex-between-c one_line">
					<view class="address">
						{{ house.position || '-' }}
					</view>
					<view class="gw_btn flex-c-c">
						<text @click="GoToGuanwang">管网数据</text>
						<u-icon name="arrow-right" size="15" color="#f7f4f4eb"></u-icon>
					</view>
				</view>
				<view class="colorGrey"> 所属社区:{{ house.communityLabel || '-' }} </view>
				<view class="colorGrey"> 联系人:{{ house.contactName || '-' }} </view>
				<view class="colorGrey"> 联系电话:{{ house.contactTel || '-' }} </view>
				<view class="colorGrey"> 预计户数:{{ house.preHouseholdNum || '-' }} </view>
			</view>
		</view>
		<view class="house_list">
			<view class="flex-c-c">
				<view class="house_list_left">
					<view class="list_title"> 房屋列表 </view>
					<view class="colorGrey fs26"> 已录入房屋{{ (listData || []).length }}幢 </view>
				</view>
				<u-search style="flex: 1" placeholder="搜索房屋" :showAction="false" v-model="keyword"> </u-search>
			</view>
			<view class="flex-between-c">
				<view
					:class="['tab_btn', current == index ? 'active_tab_btn' : '']"
					v-for="(item, index) in tabArr"
					:key="index"
					@click="tabClick(index)"
				>
					{{ item }}
				</view>
			</view>
		</view>
		<view class="type-tab-wrap">
			<view
				:class="['type-item', formType == item.type ? 'active-type-item' : '']"
				v-for="(item, index) in typesList"
				:key="index"
				@click="typeTabClick(item)"
			>
				{{ item.name }}
			</view>
		</view>
		<view class="flex-between-c card_container">
			<view class="card_item" v-for="(item, index) in listDataShow" :key="index" @click="goHouseInfo(item)">
				<view class="card-header">
					<view class="tag" v-if="(item.quesList || []).length > 0"> 问题 </view>
					<view class="card_item_title fw">
						{{ item.houseNo || '-' }}
					</view>
				</view>
				<view class="card-content">
					<view class="contact-name">{{ item.data.contactor }}</view>
					<view class="contact-phone">{{ item.data.contactTel }}</view>
				</view>
			</view>
			<view v-if="!keyword">
				<image
					style="width: 124rpx; height: 124rpx; position: fixed; right: 24rpx; bottom: 200rpx"
					src="/static/images/add.png"
					mode=""
					@click="goHouseInfo({})"
				></image>
			</view>
		</view>
	</view>
</template>
<script>
import MyNav from '../components/my-navbar/my-navbar.vue';
import { queryTownById } from '@/api/town';
import { houseInfoList } from '@/api/houseInfo';
import { typesList } from '@/config/enumeration.js';
export default {
	components: {
		MyNav,
	},
	data() {
		return {
			navBarHeight: '',
			listData: [],
			current: 0,
			tabArr: ['全部', '问题', '正常'],
			formType: 1,
			typesList,
			id: null,
      cityName:null,
			extra: [],
			keyword: '',
			house: {
				townName: '',
				position: '',
				communityLabel: '',
				contactName: '',
				contactTel: '',
			},
			eventChannel: null,
		};
	},
	computed: {
		listDataShow() {
			let listData = this.listData;
			const current = this.current;
			// 类型
			if (this.tabArr[current] === '全部') {
				listData = this.listData;
			} else if (this.tabArr[current] === '问题') {
				listData = this.listData.filter((x) => (x.quesList || []).length > 0);
			} else if (this.tabArr[current] === '正常') {
				listData = this.listData.filter((x) => (x.quesList || []).length === 0);
			}
			// 搜索
			if (this.keyword) {
				listData = listData.filter((x) => (x.houseNo || '').indexOf(this.keyword) >= 0);
			}
			return listData;
		},
	},
	onLoad(opt) {
		const extra = opt.extra
			? JSON.parse(decodeURIComponent(opt.extra))
			: [
					{ id: '1638530806733377538', name: '东阳市' },
					{ id: '1638530832775811073', name: '巍山镇' },
					{ id: '1664179393138434049', name: '古渊头村' },
			  ];
		this.extra = extra;
		console.log(extra);
		this.id = extra[extra.length - 1].id;
    this.cityName=extra[0].name
		this.init();
	},
	methods: {
		init() {
			this.getTownData();
			this.getHouseList();
		},
		// 获取小区信息
		getTownData() {
			const { id } = this;
			const params = {
				id,
			};
			queryTownById(params).then((res) => {
				this.house = res.data.result;
			});
		},
		// 获取小区所有的房屋信息
		getHouseList() {
			const params = {
				townId: this.id,
				type: this.formType,
				pageNo: 1,
				pageSize: 999,
			};
			// 调用永康模板数据
			houseInfoList(params).then((res) => {
				if (res.data.result) {
					this.listData = res.data.result.records || [];
				} else {
					this.listData = [];
				}
			});
		},
		tabClick(index) {
			this.current = index;
		},
		typeTabClick({ type }) {
			this.formType = type;
			this.refresh();
		},
		goHouseInfo({ id, instanceId }) {
			const houseInfo = {
				townId: this.house.id,
				areaId: this.house.areaId,
				type: this.formType,
				id,
				instanceId,
        cityName:this.cityName
			};
			uni.navigateTo({
				url: '/subpak_survey/houseInfo/houseInfo',
				events: {
					refresh: () => {
						this.refresh();
					},
				},
				success: (res) => {
					// 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('houseInfo', houseInfo);
				},
			});
		},
		GoToGuanwang() {
			const params = {
				id: this.id,
			};
			uni.navigateTo({
				url: '/pages/guanwang/guanwang?params=' + encodeURIComponent(JSON.stringify(params)),
			});
		},
		refresh() {
			this.getHouseList();
		},
		setNavBarHeight(heigh) {
			this.navBarHeight = heigh;
		},
	},
};
</script>
<style lang="scss" scoped>
	.header-bg-wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 440rpx;
		background-image: linear-gradient(180deg, #3576f2 0%, #3576f200 100%);
	}
	
	.page-view {
		height: 100vh;
	}
.top_bj {
	position: relative;
	padding: 30rpx;
	height: 380rpx;
	display: flex;
	flex-direction: column;

	.house_title {
		color: #fff;
		margin-top: 20rpx;
		// font-weight: 500;
		font-size: 36rpx;
	}

	.house_card {
		padding: 30rpx;
		background-color: #fff;
		flex: 1;
		margin-top: 30rpx;
		border-radius: 10rpx;

		.one_line {
			border-bottom: 1rpx solid #76767652;
			padding-bottom: 20rpx;

			.address {
				font-weight: 700;
				font-size: 30rpx;
			}

			.gw_btn {
				// width: 160rpx;
				padding: 0 10rpx;
				height: 56rpx;
				font-size: 28rpx;
				background: #3576f2;
				border-radius: 8rpx;
				color: #f7f4f4eb;
				text-align: center;
				line-height: 56rpx;
			}
		}

		.colorGrey {
			margin: 20rpx 0;
		}
	}
}

.house_list {
	box-sizing: border-box;
	padding: 24rpx;
	margin: 24rpx 24rpx 0;
	background-color: #fff;
	border-radius: 16rpx;

	.house_list_left {
		width: 250rpx;

		.list_title {
			font-weight: 700;
			font-size: 30rpx;
		}
	}

	.active_tab_btn {
		// box-sizing: border-box;
		background-color: #dae7ff !important;
		border: 2rpx solid #75a4ff;
		border-radius: 4rpx;
		color: #5990fa !important;
	}

	.tab_btn {
		margin-top: 30rpx;
		width: 160rpx;
		height: 56rpx;
		background: #f3f3f3;
		border-radius: 4rpx;
		text-align: center;
		line-height: 56rpx;
		color: #767676;
	}
}

.card_container {
	margin: 0 24rpx 24rpx;
	flex-wrap: wrap;
}

.card_item {
	position: relative;
	box-sizing: border-box;
	width: calc((100% - 24rpx) / 2);
	padding: 0 24rpx 24rpx;
	box-sizing: border-box;
	margin-bottom: 24rpx;
	border-radius: 10rpx;
	background-color: #fff;

	&:nth-of-type(2n + 1) {
		margin-right: 24rpx;
	}
}

.card-header {
	height: 72rpx;
	line-height: 72rpx;
	border-bottom: 1rpx solid #76767626;
}

.tag {
	position: absolute;
	right: 0;
	top: 15rpx;
	width: 76rpx;
	font-size: 24rpx;
	height: 40rpx;
	line-height: 40rpx;
	color: #ffffffd4;
	text-align: center;
	// transform: scaleX(-1);
	background-image: linear-gradient(270deg, #ffa7a7 0%, #f24135 100%);
	border-radius: 100px 0 0 100px;
}

.contact-name {
	margin-top: 33rpx;
	height: 45rpx;
	line-height: 45rpx;
	font-size: 32rpx;
	color: #000000e6;
}

.contact-phone {
	height: 40rpx;
	line-height: 40rpx;
	margin-top: 8rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #00000099;
}

.type-tab-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	height: 103rpx;
	width: calc(100% - 48rpx);
	margin: 0 24rpx;
	padding: 0 24rpx;
}

.type-item {
	font-size: 32rpx;
	color: #000000e6;
}

.active-type-item {
	position: relative;
	height: 103rpx;
	line-height: 103rpx;
	font-weight: 500;
	color: #3576f2;

	&::after {
		display: block;
		position: absolute;
		bottom: 20rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		content: ' ';
		width: 40rpx;
		height: 6rpx;
		background: #3576f2;
		border-radius: 7rpx;
	}
}
</style>
